もうダサくならない！色々な形のロゴをプロっぽく配置する「ぼかし」テクニック

こんにちはデザイナーのスギヤマです。

ウェブサイトやドキュメントの資料などで、「色々な会社のロゴを並べて配置」することや「色々な形のグラフィックを一律に並べる」機会は頻繁にあります。でも、これって、地味に難しくありませんか。

形の違うグラフィックをそのまま均一に並べたら

「なんだか妙にダサい」

「ちゃんと揃えて並べてるのに、カッコ悪い」

「とりあえすぐちゃぐちゃでも配置してあればいいでしょ」

となってしまった経験はないでしょうか。

しかし、お借りしているロゴやグラフィックは、その企業やブランドを象徴する大切なものです。信頼を損なわないためにも、可能な限り丁寧に扱いたいですね。

デザイナーは実践を通して、オブジェクトを美しく並べる方法やマージンの比率を会得していきますが、たとえデザインをやったことがなくても「グラフィックに対しぼかしをかけること（ぼかしを想像して見ること）」である程度再現ができるようになるので、ご紹介します。

修正前

悪い例。これを良くしていきます。

グラフィックを配置する上で大切なこと

①アイソレーションエリア（余白）をきちんと確保する

②ぼかしてシルエット化したときの比率を見る

①アイソレーションエリアをきちんと確保する

①は言うまでも有りませんが、各成果物で規定されている「きちんとそのグラフィックが視認できるための余白」＝アイソレーションエリアをきちんと確保するということです。参考のグラフィックを作成してみました。これは明らかにアイソレーションエリアが足りません。

 

 

悪い例。全体の枠（灰色の線）に対し、ロゴのマージン（空白）＝アイソレーションエリアがほとんど存在していない。

もしも「アイソレーションエリアがわからない」（資料がない、そもそもロゴやそのグラフィックに設定されていない）のであれば、「ロゴの縦幅などわかり易い場所をXとし、その0.5Xを最低アイソレーションとする」など仮のエリアを設定しましょう。

ロゴ自体の縦幅をXとし、アイソレージョンエリアを0.5Xの比率にした

 

アイソレーションエリアを確保した配置

 

アイソレーションエリアを確保し配置した例

 

上の画像はそれぞれのロゴに決まった比率でアイソレーションエリアを確保し、配置したものです。この状態でも最低限の要件は満たしていますが、更に調整をすることが可能です。

 

②ぼかしてシルエット化したときの比率を見る

対象のロゴやグラフィックをぼかすイメージで見る手法です。

この方法を取ることで、中心線を上にずらしたり、白の面積を増やすためにロゴを少し小さくするなどの処理の必要性を発見できます。例を以下に書きます。

 

上部が空いてしまう例

たとえばこの「CLC」ロゴは、重心が偏っているやや配置の難しいロゴです。ただアイソレーションエリア通りに中央にそのまま配置しただけだと、全体の矩形に対し、下がって見えます。

アイソレーションを確保して中央に正しく配置したはずですが…

 

全体を少し上のほうに配置することでより美しく見える

 

右はやや上に配置されています

そこで少し上に配置する必要があります。これは「ぼかし」を使うことでわかりやすくなります。

 

Illustrator上にて「ガウス＞ぼかし＞20px」を適応したもの

 

ぼかすと、全体の大まかな面積やシルエットがわかりやすくなります。矩形全体に対してのロゴの面積の割合や、ロゴの重心を考えたときの中央の位置が分かります。

右列のぼかし画像２点を見たときに、右上の画像はあきらかに矩形上部の空間がスカスカと空いて見えます。それに対し、右下は矩形に対して空いている空間が均等に見えます。

規定のアイソレーションエリアを保ちつつ、さらにこのような配置の処理を加えることで、より整然とした印象に見えます。

一部だけ縦に長い例

たとえば、このように殆どの要素「clan, an」は上部にあり、一部「y」だけが下に伸びているようなロゴは、少し下に下げることでより安定します。

Illustrator上にて「ガウス＞ぼかし＞20px」を適応したもの

 

右列のぼかし画像２点を見たときに、右上の画像はあきらかに矩形下部の空間がスカスカと空いて見えます。それに対し、右下は矩形に対して空いている空間が均等に見えます。

 

見ようによっては少し下げすぎかもしれません…

 

シンボルとロゴタイプが一直線でない例

たとえば、シンボルとロゴタイプなどが一直線でないグラフィックやロゴを配置するときにも、ぼかしイメージを利用しながら空いた空間に注意します。

 

Illustrator上にて「ガウス＞ぼかし＞20px」を適応したもの

 

右列のぼかし画像２点を見たときに、右上の画像はあきらかに矩形の中央下部〜右下部の空間がスカスカと空いて見えます。それに対し、右下は矩形に対して空いている空間が均等に見えます。

 

右はやや下に下げている

 

「このロゴ全体が鉛でできていると考え、白い薄い板の上に置いたときに、ちょうど重心が取れる位置」とイメージしても良いかもしれません。左に猫の顔のシンボルマークがあり、重さがあるため、CLANYAN JPのロゴタイプ部分を完全に中央線上に置いていないのがポイントです。

 

Illustrator上にて「ガウス＞ぼかし＞20px」を適応したもの

 

右列のぼかし画像２点を見たときに、右上の画像はあきらかに矩形の上部の空間がスカスカと空いて見えます。それに対し、右下は矩形に対して空いている空間が均等に見えます。

右はやや上に上げている

 

こちらも同様に、完全に中央に置いてしまうと、バランスが悪く見えます。そのためほんの気持ち程度上にあげることで、矩形に対し、ロゴとの空間が均等に保たれるようになります。

修正後

ただ配置した状態

 

アイソレーションエリアを設定し確保した状態

 

アイソレーションエリアを設定し、さらにぼかして見ることで矩形とロゴの空間を調整した状態

ぼかし画像を用意するのが面倒な場合は、目を細めたりメガネを外したりすることでぼかしを作り出すことができます。また空間や重さをイメージしたり、面積比を意識することで、より美しい配置に近づけることができます。